<template>
    <view class="card_center">
		<text class="text_1">连续月卡</text>
        <scroll-view class="card_scroll" scroll-x="true" @scroll="handleScroll" scroll-left="0">
			<view class="card_scroll-item scroll_text">
				<view>连续包年</view>
				<view>￥292</view>
				<view>￥365</view>
			</view>
			<view class="card_scroll-item scroll_text">
				<view>连续季度</view>
				<view>￥292</view>
				<view>￥￥365</view>
			</view>
			<view class="card_scroll-item scroll_text">
				<view>连续月</view>
				<view>￥292</view>
				<view>￥365</view>
			</view>
		</scroll-view>
		<text class="text_1">月卡</text>
		<scroll-view class="card_scroll" scroll-x="true" @scroll="handleScroll" scroll-left="0">
			<view class="card_scroll-item scroll_text">
				<view>连续包年</view>
				<view>￥292</view>
			</view>
			<view class="card_scroll-item scroll_text">
				<view>连续季度</view>
				<view>￥292</view>
			</view>
			<view class="card_scroll-item scroll_text">
				<view>连续月</view>
				<view>￥292</view>
			</view>
		</scroll-view>
		<view class="confirm">确认开通</view>
	</view>
</template>

<script>
    export default {
		name:'cardCenter',
        handleScroll(e) {
        console.log(e);
        }
        }
</script>

<style lang="scss" scoped>
	.card_center{
		padding-top: 1.5vh;
	}
	.text_1{
		padding-left: 5vw;
		line-height: 4vh;
		font-size:15px;
		font-weight: bold;
	}
    .card_scroll{
        white-space: nowrap;
        width: 100%;
		padding: 0 4vw;
		margin: 2vw 0;
        .card_scroll-item{
            display: inline-block;
            width: 50%;
			border:1px solid #C8C7CC;
			// box-shadow: 10px 10px 15px #888888;
			border-radius: 2vh;
			margin-right: 2vw;
        }
		.scroll_text{
			padding: 1vw;
			text-align: center;
			line-height: 5vh;
		}
		.scroll_text view:nth-child(1){
			font-size:18px;
		}
		.scroll_text view:nth-child(2){
			font-weight: bold;
			font-size: 25px;
			color: red;
		}
		.scroll_text view:nth-child(3){
			font-size: 18px;
			text-decoration:line-through;
		}
    }
	.confirm{
		background-color: red;
		width: 95%;
		height: 5vh;
		margin: 3vh auto;		
		text-align: center;
		line-height: 5vh;
		border-radius: 0.8vh;
		color: #FFFFFF;
	}
</style>